<template>
  <view class="index">
    <!-- 头部组件 -->
    <view class="topbar">
      <view>
        <NavBar title="我的墙墙">
        </NavBar>
      </view>
    </view>
    <view class="wallIList">
      <view class="wallItem"
        v-for="(item,index) in dataList"
        :key="index">
        <view class="flex1">
          <view class="userInfo">
            <img :src="item.ima"
              class="img1" />
            <view class="oneText">
              <view class="title">{{item.yhm}}</view>
              <view class="time">发布于 {{item.fbsj}}</view>
            </view>
          </view>
          <view @tap="handelFollow(index)"
            v-if="item.followStatus == 0"
            class="follow waiting">
            <image src="@/static/img/plus.png"
              mode="widthFix"></image>
            <text>关注</text>
          </view>
          <view @tap="handelFollow(index)"
            v-else
            class="follow already">
            <text>已关注</text>
          </view>
        </view>
        <view class="text">{{item.text}}</view>
        <view class="flex2">
          <img v-for="(item1,index) in item.fbtp"
            :key="index"
            :src="item1"
            :class="index % 2 === 0 && index != 0 ? 'img2 img2Mar' :'img2'" />
        </view>
        <view class="flex3">
          <view class="flex1">
            <image class="img3"
              src="../../static/img/upload-2.png"></image>
            <view style="font-size: 25rpx;color: #8C8C8C;">分享</view>
          </view>
          <view class="flex1">
            <view class="flex1">
              <image v-if="item.dzStatus == 0"
                @tap="upvote(index)"
                src="@/static/img/base-icon-like.png"
                class="img3" />
              <image v-else
                @tap="upvote(index)"
                src="@/static/img/dianzan.png"
                class="img3" />
              <view style="font-size: 25rpx;color: #8C8C8C;margin-right: 3vw;">{{item.dz}}</view>
            </view>

            <view class="flex1"
              @tap="toPl">
              <image src="@/static/img/rrame.png"
                class="img3" />
              <view style="font-size: 25rpx;color: #8C8C8C;margin-right: 3vw;">{{item.pl}}</view>
            </view>

            <image src="@/static/img/gengduo.png"
              class="img3" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup
  lang="ts">
  import { ref } from "vue"
  import NavBar from '@/components/navBar.vue'
  const dataList = ref([
    {
      ima: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', yhm: "我是风车车", fbsj: '2024-10-23', followStatus: 0, text: '这是一段emo', dz: 321, dzStatus: 0, pl: '120', fbtp: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',]
    },
    {
      ima: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', yhm: "我是风车车", fbsj: '2024-10-23', followStatus: 1, text: '这是一段emo', dz: 321, dzStatus: 1, pl: '120', fbtp: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',]
    },
    {
      ima: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', yhm: "我是假老练", fbsj: '2024-9-1', followStatus: 1, text: '这是一段评论', dz: 210, dzStatus: 0, pl: '53', fbtp: ['https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',]
    },
  ])

  // 关注
  const handelFollow = (index : number) => {
    if (dataList.value[index].followStatus == 0) {
      dataList.value[index].followStatus = 1
    } else {
      dataList.value[index].followStatus = 0
    }
  }
  // 点赞
  const upvote = (index) => {
    if (dataList.value[index].dzStatus == 0) {
      dataList.value[index].dzStatus = 1
      dataList.value[index].dz += 1
    } else {
      dataList.value[index].dzStatus = 0
      dataList.value[index].dz -= 1
    }
  }
  // 评论
  const toPl = () => {
    uni.navigateTo({ url: '/pages/my/interactionCenterDetail' })
  }
</script>

<style lang="scss"
  scoped>
  .index {
    height: 100vh;
    background-color: #f4f6fa;
    position: relative;

    .topbar {
      width: 100%;
      height: 431rpx;
      background-image: url('@/static/img/wdqqbjt.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;

    }

    .wallIList {
      position: absolute;
      top: 176rpx;
      height: calc(100vh - 88rpx);
      overflow-y: scroll;
      padding: 32rpx 24rpx 0;

      .wallItem {
        // width: 702rpx;
        background: #FFFFFF;
        border-radius: 32rpx 32rpx 32rpx 32rpx;
        margin-bottom: 24rpx;
        padding: 24rpx;
      }
    }
  }

  .topRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    image {
      width: 36rpx;
      margin-left: 8rpx;
    }

  }

  :deep(.navBarTop) {
    background-color: transparent;
  }

  .img1 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    margin-right: 24rpx;
  }

  .img2 {
    width: 210rpx;
    height: 210rpx;
    border-radius: 24rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }

  .img2Mar {
    margin-right: 0;
  }

  .img3 {
    width: 3vh;
    height: 3vh;
    margin-right: 1vw;
  }


  .flex1 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .userInfo {
      display: flex;
      align-items: center;
    }

    .follow {
      width: 120rpx;
      height: 52rpx;
      border-radius: 26px 26px 26px 26px;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        margin-right: 5rpx;
      }

      text {
        font-size: 26rpx;
        color: #FFFFFF;
      }
    }

    .waiting {
      background: #6B64D3;
    }

    .already {
      background: #E4E2FC;
      border: 2rpx solid #CAC5FA;

      text {
        color: #6B64D3;
      }
    }
  }

  .flex2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .flex3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22rpx;
  }

  .title {
    font-weight: 900;
    font-size: 32rpx;
    color: #262626;
  }

  .time {
    font-weight: normal;
    font-size: 28rpx;
    color: #8C8C8C;
  }

  .text {
    margin: 24rpx 0;
    font-weight: 700;
    font-size: 28rpx;
    color: #262626;
  }
</style>